<template>
	<div class="lc_wrap">
		<el-row class="CountreportTabel">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<lcTree @ready="ready" :deviceType="systemInfo.treeType"></lcTree>
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<div class="search-tools">
						<div class="search-left">
							<!-- 时 -->
							<div v-if="dateType == 1">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable="false"></el-date-picker>
								<el-time-select v-model="hourTime" size="small" placeholder="选择时间" :picker-options="{
                    start: '00:00',
                    step: '01:00',
                    end: '23:00'
                  }" :clearable="false" style="margin-left:10px"></el-time-select>
							</div>
							<!-- 日 -->
							<div v-if="dateType == 2">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable="false"></el-date-picker>
							</div>
							<!-- 周 -->
							<div v-if="dateType == 3">
								<el-date-picker v-model="dateTime" type="week" size="small" format="yyyy 第 WW 周" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择周" :clearable="false"></el-date-picker>
							</div>
							<!-- 月 -->
							<div v-if="dateType == 4">
								<el-date-picker v-model="dateTime" type="month" size="small" value-format="yyyy-MM" :picker-options="pickerOption" placeholder="选择月份" :clearable="false"></el-date-picker>
							</div>
							<!-- 年 -->
							<div v-if="dateType == 5">
								<el-date-picker v-model="dateTime" type="year" size="small" value-format="yyyy" :picker-options="pickerOption" placeholder="选择年份" :clearable="false"></el-date-picker>
							</div>
						</div>
						<div class="search-right">
							<div class="search-tabs">
								<el-radio v-model="dateType" v-for="(item, index) in dateTypeList" :key="index" :label="item.label" :disabled="item.disable">{{ item.value }}
								</el-radio>
							</div>
							<div class="searcg-btns">
								<el-button type="primary" size="small" icon="el-icon-search" @click="search">搜 索</el-button>
							</div>
						</div>
					</div>
					<avue-crud v-if="isTableShow" :option="option" :table-loading="loading" :data="data" 
						:permission="permissionList" 
						v-model="form" ref="crud" @search-change="searchChange" 		
						@refresh-change="refreshChange">
						<template slot="menuLeft">
							<el-button type="warning" size="small" plain icon="el-icon-download" @click="handleExport" v-if="this.commonExportBtn">导出
							</el-button>
						</template>
						<template slot="aqiLevel" slot-scope="scope">
							<div class="level_env_bg" :class="getEnvBgColor(scope.row.aqiLevel)" v-if="scope.row.aqiLevel>0"></div>
							<div v-else></div>
						</template>
					</avue-crud>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getReportHead, getList, toExport } from "@/api/airq/countreport";
	import website from "@/config/website";
	import { getToken } from "@/util/auth";
	import lcTree from "@/components/common/tree.vue";
	import overlay from "@/components/common/overlay.vue";
	import mixmin from '@/config/mixmin'	
	export default {
		components: {
			lcTree,
			overlay
		},
		data() {
			let _this = this;
			return {
				isTableShow: true,
				form: {},
				query: {},
				loading: false,
				selectionList: [],
				option: {
					stripe: true, // 斑马纹
					menu: false, // 把操作列藏起来
					addBtn: false,
					calcHeight: 30,
					tip: false,
					printBtn: true,
					searchShow: true,
					searchMenuSpan: 6,
					border: true,
					index: false,
					dialogClickModal: false,
					column: []
				},
				data: [],
				nodeId: null,
				deptInfoName: "",
				deptInfoId: "",
				dateType: 2, // 日期格式：日、月、年
				dateTime: new Date().format("yyyy-MM-dd hh:mm:ss"), // 默认显示的日期
				hourTime: "00:00",
				dateTypeList: [{
						label: 2,
						value: "日"
					},
					{
						label: 3,
						value: "周"
					},
					{
						label: 4,
						value: "月"
					},
					{
						label: 5,
						value: "年"
					}					
				],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return _this.dateType == 3 ? false : time.getTime() > Date.now();
					}
				},
				factorList: [], // 存放因子标识的数组，用于给因子赋默认值'-'
				MOTION_STATE: '运行状态'
			};
		},
		computed: {
			commonExportBtn() {
				 return this.permission[this.systemInfo.exportBtn]
			},
			permissionList() {
				return {
					printBtn: this.vaildData(this.permission[this.systemInfo.printBtn],false) 
				};
			},
			/** 环境等级**/
			getEnvBgColor() {
				return function(level) {
					return 'level_env_bg_' + level
				}
			},
			/** 时间日期**/
			myDate() {
				let myDate = null;
				switch(this.dateType) {
					case 1: // 时
						myDate =
							this.dateTime.slice(0, 10) + " " + this.hourTime.slice(0, 2);
						break;
					case 2: // 日
						myDate = this.dateTime.slice(0, 10);
						break;
					case 3: // 周
						myDate = this.dateTime.slice(0, 10);
						break;
					case 4: // 月
						myDate = this.dateTime.slice(0, 7);
						break;
					case 5: // 年
						myDate = this.dateTime.slice(0, 4);
						break;

					default:
						myDate = this.dateTime;
						break;
				}
				return myDate
			}
		},
		
		watch: {
			dateType() {
				this.dateTime = new Date().format("yyyy-MM-dd hh:mm:ss"); // 默认显示的日期
				this.page.currentPage = 1;
				this.onLoad();
			}
		},
		mixins:[mixmin],	
		methods: {
			ready(data) {
                if(data.nodeType<2){
                	return false
                }				
				this.nodeId = data.key;
				this.deptInfoName = data.title;
				this.deptInfoId = data.key;
				this.onLoad()
			},
			handleExport() {
				this.$confirm("是否导出报表数据?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "warning"
				}).then(() => {
					window.open(`api/squirrel-airq/statreport22/export?${
			            this.website.tokenHeader
			          }=${getToken()}&treeId=${this.nodeId}&type=${
			            this.dateType
			          }&time=${this.myDate}` 
					);
				});
			},
			/**
			 * 获取表头数据+
			 */
			getTableHead(nodeId, type, time) {
				let _this = this;
				return new Promise(function(resolve, reject) {
					getReportHead(nodeId, type, time).then(res => {
						if(res.data.success) {
							if(res.data.data.length == 0) {
								_this.isTableShow = false;
								return;
							} else {
								_this.isTableShow = true;
							}
							// 封装表头
							let tableHead = res.data.data.length ? [{
									label: "站点名称",
									prop: "siteName",
									align: "center",
									fixed: "left",
									overHidden: true,
									width: 150
								},
								{
									label: "统计时间",
									prop: "statTime",
									align: "center",
									fixed: "left",
									overHidden: true,
									width: 150
								}
							] : [];

							// 存放因子的列表，用于设置默认'-'值
							_this.factorList = [];
							res.data.data.forEach(item => {
								_this.factorList.push(item.name)
								if(item.qi === '') { //如果分指数不存在
									tableHead.push({
										label: `${item.alias}${item.airType}`,
										align: 'center',
										children: [{
											label: `${item.avg}\n${item.unit}`,
											prop: `${item.name}_avg`,
											align: 'center',
											width: 200
										}]
									})
								} else {
									tableHead.push({
										label: `${item.alias}\n${item.airType}`,
										align: 'center',
										children: [{
												label: `${item.avg}\n${item.unit}`,
												prop: `${item.name}_avg`,
												align: 'center',
												width: 100
											},
											{
												label: item.qi,
												prop: `${item.name}_qi`,
												align: 'center',
												width: 100
											}
										]
									})
								}
							})
							if(type!=5){
								tableHead.push({
									label: "空气质量指数(AQI)",
									prop: "aqiVal",
									align: "center"
								}, {
									label: "首要污染物",
									prop: "primaryFactor",
									align: "center"
								}, {
									label: "空气质量指数类别",
									prop: "word",
									align: "center"
								}, {
									label: "空气质量指数类别",
									align: "center",
									children: [{
										label: '类别',
										prop: 'type',
										align: "center"
									}, {
										label: '颜色',
										prop: 'aqiLevel',
										slot: true,
										align: "center"
									}]
								})								
							}
							// 将表头放入option
							_this.option.column = tableHead;
							resolve();
						} else {
							reject("网络拥堵，请退出重试");
						}
					});
				});
			},
			onLoad() {
				this.loading = true;
				this.getTableHead(this.nodeId, this.dateType, this.myDate).then(() => {
					if(this.nodeId) {
						getList(this.nodeId, this.dateType, this.myDate, this.query).then(res => {
							const data = res.data.data;
							if(data) {
								// this.page.total = data.total;
								this.data = []; // 置空
								data.forEach(item => {
									// 点位时间的值
									let obj = {
										siteName: item.siteName,
										time: '-',
										statTime: item.statTime,
										aqiVal: item.aqiVal,
										aqiLevel: item.aqiLevel, //等级
										primaryFactor: item.primaryFactor || '-', //首要污染物
										type: item.type,
										word: item.word
	
									}
									// 根据表头的因子列表给所有因子一个默认值'-'
									this.factorList.forEach(el => {
										obj[`${el}_avg`] = '-'
										obj[`${el}_qi`] = '-'
									})
									// 因子的值
									item.factorList.forEach(el => {
										obj[`${el.head}_avg`] = el.avgVal
										obj[`${el.head}_qi`] = el.aqiVal
									})
									this.data.push(obj)
								})
							}
							this.loading = false;							
						});
					}						
				});

			}
		}
	};
</script>
<style lang="scss">
	.CountreportTabel {
		.el-table__empty-block {
			width: 100% !important;
		}
		.avue-crud__menu {
			margin-bottom: $avue-tabel-menu-btn_margin_bottom;
		}
		.search-tools {
			padding-left: 0 !important;
			height: auto !important;
			margin-bottom: $common_margin_input_bottom;
		}
		.table-wrapper {
			.el-card__body {
				height: calc(100% - 35px);
				.avue-crud {
					height: calc(100% - 155px);
				}
			}
			.el-table__fixed {
				height: calc(100% - 12px) !important;
			}
			.el-table__fixed-right {
				height: calc(100% - 12px) !important;
			}
		}
	}
</style>
<style lang="scss" scoped>
	/*穿透 表头换行*/
	
	/deep/ .el-table th>.cell {
		white-space: pre-line;
	}
	
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	
	.overlay {
		position: absolute;
		width: 200px;
		height: 100%;
		opacity: 0;
		display: flex;
		align-items: center;
		padding-left: 6px;
		.tree-tool {
			height: 34px;
			width: 18px;
			background: #fff;
			box-shadow: 2px 1px 4px #ccc;
			border-top-right-radius: 3px;
			border-bottom-right-radius: 3px;
			cursor: pointer;
			display: flex;
			padding: 6px 0;
			z-index: 9999;
			.tool-line {
				margin-left: 3px;
				height: 100%;
				border-left: 1px solid #ddd;
			}
		}
	}
	
	.overlay:hover {
		opacity: 1;
	}
	
	.level_env_bg {
		content: '';
		background: #00e400;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: block;
		margin: 0 auto;
	}
	
	.level_env_bg_1 {
		background: #00e400;
	}
	
	.level_env_bg_2 {
		background: #ffff00;
	}
	
	.level_env_bg_3 {
		background: #ff7e00;
	}
	
	.level_env_bg_4 {
		background: #ff0000;
	}
	
	.level_env_bg_5 {
		background: #99004c;
	}
	
	.level_env_bg_6 {
		background: #7e0023;
	}
</style>